<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.2/ace.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.2/theme-monokai.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.2/mode-html.js"></script>
    <script type="module" src="/static/main.js?COMMIT_HASH"></script>
    <script src="/static/script.js?COMMIT_HASH"></script>
    <title>openHASP File Editor</title>
    <link rel="stylesheet" href="/static/vars.css?COMMIT_HASH">
    <link rel="stylesheet" href="/static/style.css?COMMIT_HASH">
    <link rel="icon" href="/static/logo.svg?COMMIT_HASH" type="image/svg+xml">
    <link href="https://fonts.cdnfonts.com/css/jetbrains-mono" rel="stylesheet">
    <link href="https://fonts.cdnfonts.com/css/source-code-pro" rel="stylesheet">
</head>

<body v-cloak v-scope @vue:mounted="mounted">
    <div class="container__editor" onmousedown="hidectx()">
        <div class="container__left">
            <div id="tree">
                <div class="item bold"><span class="fi fa-flash" title="/"></span><span>L:</span></div>
            </div>
        </div>
        <div class="resizer" id="dragMe"></div>
        <div class="container__right">
            <div class="toolbar"><input type="file" id="upload" name="upload" multiple="multiple" hidden><span
                    class="left"><button id="home">Home</button><button
                        onclick='upload(_("tree"),"/")'>Upload</button><button id="save"
                        disabled="disabled">Save</button></span>
                <div class="right"><input id="page" type="number" min="1" max="12" class="number"><button
                        id="load">Reload Pages</button><button id="init">Clear Pages</button></div><span
                    class="left"><button id="cut" disabled="disabled">Cut</button><button id="copy"
                        disabled="disabled">Copy</button><button id="paste"
                        disabled="disabled">Paste</button></span><span id="name"></span><span class="left"><button
                        id="undo" disabled="disabled">Undo</button><button id="redo"
                        disabled="disabled">Redo</button></span><span class="left"><select id="font">
                        <option>JetBrains Mono</option>
                        <option selected="selected">Source Code Pro</option><input id="fontsize" type="number"
                            step="any" min="9" max="40" value="12"></span>
            </div>
            <div id="editor" class="container__bottom"></div>
            <div id="preview" class="container__bottom"></div><iframe id="download-frame"></iframe>
        </div>
        <div id="ctx" onmousedown="event.stopPropagation()">
            <ul>
                <li><span class="icon file"></span>New File</li>
                <li><span class="icon upload"></span>Upload Files</li>
                <li><span class="icon edit"></span>Edit</li>
                <li><span class="icon eye"></span>Preview</li>
                <li><span class="icon download"></span>Download</li>
                <li><span class="icon trash"></span>Delete</li>
            </ul>
        </div>
    </div>
    <div id="toast"></div>
</body>

</html>
